<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.container {
				width: 100%;
				min-width: 1000px;
				height: 500px;
				background: #ccc;
				position: absolute;
				top: 10%;
				left: 50%;
				transform: translate(-50%, 0);
				border-bottom: 10px solid #000;
				display: flex;
				justify-content: space-around;
				align-items: flex-end;
			}
			.container > div {
				position: relative;
				box-sizing: border-box;
				width: 33.33%;
				height: 100%;
			}
			.container .ganzi {
				width: 15px;
				height: 450px;
				background: #666;
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%);
				/* border:1px solid #000; */
				box-shadow: 0px 5px 5px #000;
			}
			.box-container {
				width: 100%;
				position: absolute;
				left: 0;
				/* transform: translate(50%); */
				bottom: 0;
				text-align: center;
			}
			.flex-box {
				height: 25px;
				border-radius: 12px;
				display: block;
				background: #368;
				margin: 0 auto;
				border: 1px solid #333;
				box-shadow: 0px 5px 5px #333, inset 0px -1px 10px rgba(0,0,0,0.4);
			}
			.control {
				width: 100%;
				position: absolute;
				top: 80%;
				left: 50%;
				transform: translate(-50%, 0);
				display: flex;
				justify-content: space-around;
			}
			.control button {
				padding: 8px 12px;
				background: #368;
				color: #fff;
				outline: none;
				border: none;
			}
			.tip {
				color: #f00;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">
				<div class="ganzi"></div>
				<div class="box-container"></div>
			</div>
			<div class="middle">
				<div class="ganzi"></div>
				<div class="box-container"></div>
			</div>
			<div class="rigth">
				<div class="ganzi"></div>
				<div class="box-container"></div>
			</div>
		</div>
		<div class="control">
			<div class="left">
				<button type="button" class="btn-right">></button>
			</div>
			<div class="middle">
				<button type="button" class="btn-left"><</button>
				<button type="button" class="btn-right">></button>
			</div>
			<div class="right">
				<button type="button" class="btn-left"><</button>
			</div>
		</div>
		<div class="tip">
			规则:将诺塔从第一根柱子移动到第三根,每次移动仅允许小的出现在大的上面,否则移动无效
		</div>
		<div>
			<button id="help">点我试试,帮你走</button>
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			var config = {
				default_arr: [1, 2, 3],
				step: 0,
				time: 0,
				falg: true,
			}
			var els = document.querySelectorAll('.box-container'),
				left_button = document.getElementsByClassName('btn-right'),
				right_button = document.getElementsByClassName('btn-left'),
				str = ''
			// 初始化
			;(function () {
				for (var i in config.default_arr) {
					str += `<div class="flex-box" style="width:${100 + (config.default_arr[i] - 1) * 20}px"></div>`
				}
				els[0].innerHTML = str
				for (let i = 0, len = left_button.length; i < len; i++) {
					left_button[i].onclick = function () {
						if (els[i].innerHTML == '') {
							return
						}
						move(els[i], els[i + 1])
					}
				}
				for (let i = 0, len = right_button.length; i < len; i++) {
					right_button[i].onclick = function () {
						if (els[i + 1].innerHTML == '') {
							return
						}
						move(els[i + 1], els[i])
					}
				}
			})()
			function move(before_el, after_el) {
				var $before_el = $(before_el).children().eq(0),
					$after_el = $(after_el).children().eq(0),
					before_el_width = $before_el.css('width'),
					after_el_width = $after_el.css('width')
				if (!after_el_width || parseInt(before_el_width) < parseInt(after_el_width)) {
					$($before_el).remove()
					$(after_el).prepend($before_el)
					config.step++
				}
				if (isWin()) {
					alert('天才,你赢了,你只用了' + config.step + '步')
				}
			}
			function isWin() {
				if ($(els[2]).children().length == config.default_arr.length) {
					return true
				} else {
					return false
				}
			}
			function hanoi(n, A, B, C) {
				if (n == 1) {
					move(A, C)
				} else {
					hanoi(n - 1, A, C, B)
					move(A, C)
					hanoi(n - 1, B, A, C)
				}
			}
			function help() {
				var falg = confirm('看你走的这么辛苦,要我帮你完成吗')
				if (falg) {
					config.falg = false
					hanoi(config.default_arr.length, $(els[0]), $(els[1]), $(els[2]))
				}
			}
			document.getElementById('help').onclick = help
		</script>
	</body>
</html>
